<script setup lang="ts">
interface IProps {
  record?: {
    data: Array<{ id: string, region_id: string }>
    tag?: string
  }
  submit?: (
    data: Array<{ id: string, region_id: string }>,
    tag: string
  ) => void | Promise<void>
}

const props = defineProps<IProps>()
const visible = defineModel<boolean>('visible', { required: true })

const tagName = ref('')

const dialogTitle = computed(() => {
  if (!props.record || props.record.data.length === 1) {
    return '设置标签'
  }
  return '批量设置标签'
})

async function handleSubmit() {
  props.submit && (await props.submit(props.record?.data ?? [], tagName.value))
}

async function handleOpen() {
  tagName.value = props.record?.tag || ''
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    :title="dialogTitle"
    :mask-closable="false"
    :before-ok="handleSubmit"
    :before-close="() => (tagName = '')"
    :before-open="handleOpen"
  >
    <a-input
      v-model="tagName"
      class="mb-1 mt-2"
      placeholder="请输入节点标签"
      :max-length="20"
      show-word-limit
    />
    <div class="text-xs leading-5 text-color-3">
      示例: 名称-RACK-UUID-RU
    </div>
  </resource-dialog>
</template>

<style scoped lang="scss"></style>
